<template>
    <div>
      <Title :title="title"></Title>
      <div ref="bottom2" style="height: 150px;"></div>
    </div>
  </template>
  
  <script setup>
  import Title from './Title.vue';
  import { ref, onMounted } from 'vue';
  import { Pie } from '@antv/g2plot';
  
  const bottom2 = ref(null);
  const title = ref('污染源占比饼图');
  
  const loadPie = () => {
    const data = [
      { type: '工业', value: 30 },
      { type: '交通', value: 20 },
      { type: '生活', value: 15 },
      { type: '其他', value: 35 },
    ];
  
    const piePlot = new Pie(bottom2.value, {
      appendPadding: 10,
      data,
      angleField: 'value',
      colorField: 'type',
      radius: 0.8,
      label: {
        style: {
          fill: 'white',
        },
        type: 'outer',
        content: '{name}{value}%',
      },
      legend: {
        itemName: {
          style: {
            fill: 'white',
          },
        },
      },
      color: ({ type }) => {
        if (type === '工业') return '#ff9966';
        if (type === '交通') return '#6699ff';
        if (type === '生活') return '#9966ff';
        return '#66cc66';
      },
      interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
    });
  
    piePlot.render();
  };
  
  onMounted(() => {
    loadPie();
  });
  </script>
  
  <style lang="less" scoped></style>